<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"/>
<title>login</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/layer/3.0.1/mobile/need/layer.css" />
<!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
<script type="text/javascript" src="js/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/js/phone.js" ></script>
<script type="text/javascript" src="http://cdn.bootcss.com/layer/3.0.1/mobile/layer.min.js"></script>
<script type="text/javascript" src="js/js/login.js"></script>
<style>
	body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0; list-style:none;font-family: "微软雅黑"; -webkit-appearance: none;}
	a{color:#2b2b2b; text-decoration:none}
	body{ font-size:12px; background-color: #323542;}
	img { border:0px;}
	
	.whole{
		width:100%;
		overflow:hidden;
		margin:0 auto;
	}
	.title{
		width:100%;
		height:auto;
		overflow:hidden;
		font-size:36px;
		text-align:center;
		line-height:200px;
		color:#fff;
	}
	.coordinates-icon{
		width:400px;
		height:240px;
		margin:20px auto;
		position:relative;
	}
	.coordinates{
		width:144px;
		height:190px;
		overflow:hidden;
		position:absolute;
		z-index:8;
		margin-left:134px;
		top:-60px;
	}
	.coordinates img{
		width:100%;
		height:auto;
	}
	
	.circle-1-1{
		width:100%;
		height:94px;
		overflow:hidden;
		border:1px solid rgba(255,255,255,0.5);
		border-radius:100%;
		background-color:#3a3d4a;
		position:absolute;
		bottom:0;
		z-index:1;
		opacity:0;
	}
	.circle-2-2{
		width:234px;
		height:56px;
		overflow:hidden;
		border:1px solid rgba(255,255,255,0.4);
		border-radius:100%;
		background-color:#4e515c;
		/*margin:19px 88px;*/
		left:50%;
		margin-left:-117px;
		bottom:19px;
		position:absolute;
		z-index:2;
		opacity:0;
	}
	.circle-3-3{
		width:108px;
		height:26px;
		overflow:hidden;
		border:1px solid rgba(255,255,255,0.3);
		border-radius:100%;
		background-color:#71747d;
		/*margin:15px 63px;*/
		z-index:3;
		left:50%;
		margin-left:-54px;
		bottom:34px;
		position:absolute;
		opacity:0;
	}
	
	.login-form{
		width:458px;
		height:auto;
		margin:90px auto 20px auto;
	}
	.common-div{
		width:100%;
		height:82px;
		overflow:hidden;
		border-radius:4px;
		-webkit-border-radius:4px;
		margin-bottom:40px;
	}
	.user-name,.user-pasw{
		background-color:rgba(255,255,255,0.1);
	}
	.common-div >.common-icon{
		float:left;
		width:44px;
		height:44px;
		overflow:hidden;
		margin:19px;
	}
	.common-div >.common-icon img{
		width:100%;
		height:auto;
	}
	.common-div >input{
		float:left;
		width:360px;
		height:44px;
		margin:19px 8px;
		background-color:transparent;
		border:none;
		outline:none;
		font-size:26px;
		color:#fff;
	}
	.login-btn{
		background-color:#0bd38a;
		color:#fff;
		font-size:28px;
		text-align:center;
		line-height:82px;
	}
	.forgets{
		width:458px;
		height:auto;
		margin:0 auto;
	}
	.forgets >a{
		color:#fff;
		opacity:0.2;
		font-size:24px;
	}
	.forgets >a +a{
		float:right;
	}
	
	/***layer css***/
	.layui-m-layercont,.layui-m-layerbtn >span{
		font-size:24px !important;
	}
	
	/***动画***/
	.topAct{
		animation:topAct 3s ease-in-out infinite;
		-webkit-animation:topAct 3s ease-in-out infinite;
		-moz-animation:topAct 3s ease-in-out infinite;
		-o-animation:topAct 3s ease-in-out infinite;
		-ms-animation:topAct 3s ease-in-out infinite;
	}
	@keyframes topAct
	{
		0% {top:-60px;}
		50% {top:0px;}
		100%{top:-60px;}
	}
	@-webkit-keyframes topAct
	{
		0% {top:-60px;}
		50% {top:0px;}
		100%{top:-60px;}
	}
	@-moz-keyframes topAct
	{
		0% {top:-60px;}
		50% {top:0px;}
		100%{top:-60px;}
	}
	
	.circle-show{
		animation:circleShow 3s ease-in-out infinite 1s;
		-webkit-animation:circleShow 3s ease-in-out infinite 1s;
		-moz-animation:circleShow 3s ease-in-out infinite 1s;
		-ms-animation:circleShow 3s ease-in-out infinite 1s;
		-o-animation:circleShow 3s ease-in-out infinite 1s;
	}
	@keyframes circleShow
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
	@-webkit-keyframes circleShow
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
	@-moz-keyframes circleShow
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
	
	.circle-show-1{
		animation:circleShow1 3s ease-in-out infinite 1.2s;
		-webkit-animation:circleShow1 3s ease-in-out infinite 1.2s;
		-moz-animation:circleShow1 3s ease-in-out infinite 1.2s;
		-ms-animation:circleShow1 3s ease-in-out infinite 1.2s;
		-o-animation:circleShow1 3s ease-in-out infinite 1.2s;
	}
	@keyframes circleShow1
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
	@-webkit-keyframes circleShow1
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
	@-moz-keyframes circleShow1
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
	
	.circle-show-2{
		animation:circleShow2 3s ease-in-out infinite 1.4s;
		-webkit-animation:circleShow2 3s ease-in-out infinite 1.4s;
		-moz-animation:circleShow2 3s ease-in-out infinite 1.4s;
		-ms-animation:circleShow2 3s ease-in-out infinite 1.4s;
		-o-animation:circleShow2 3s ease-in-out infinite 1.4s;
	}
	@keyframes circleShow2
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
	@-webkit-keyframes circleShow2
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
	@-moz-keyframes circleShow2
	{
		0% {opacity:0;}
		50% {opacity:1;}
		100%{opacity:0;}
	}
</style>
</head>

<body>
<div class="whole">
	<div class="title">Welcome come back</div>
    <div class="coordinates-icon">
    	<div class="coordinates topAct">
        	<img src="images/image/coordinates.png" />
        </div>
        <div class="circle-1-1 circle-show-2"></div>
        <div class="circle-2-2 circle-show-1"></div>
        <div class="circle-3-3 circle-show"></div>
    </div>
    <div class="login-form">
    	<form action="#">
        	<div class="user-name common-div">
            	<span class="eamil-icon common-icon">
                	<img src="images/image/password.png" />
                </span>
                <input type="text" id="username"  name="username"  placeholder="username*" />        
            </div>
            <div class="user-pasw common-div">
            	<span class="pasw-icon common-icon">
                	<img src="images/image/password.png" />
                </span>
                <input type="password" id="password" name="password"  placeholder="password*" />        
            </div>
            <div class="login-btn common-div" onclick="Login()">Sign in</div>
        </form>
    </div>
   <!-- <div class="forgets">
    	<a href="#">Forget password?</a>
        <a href="#">New here?Sign up</a>
    </div> -->
</div>
</body>
</html>




































































































